<template>
  <div id="EditDatabaseConnect" v-if="searchpro == '' ? false : true">
      <el-form inline-message :rules="formRules" :model="formData" label-width="200px"
               label-position="left" ref="form" >
          <el-form-item  label="连接名称"  prop="name" style="margin-bottom: 5px;">
              <el-input size="mini" v-model="formData.name" style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item  label="驱动" prop="driverClass" style="margin-bottom: 5px;">
              <el-select size="mini" v-model="formData.driverClass" style="width: 300px;">
                  <el-option v-for="item in driverClasses" :key="item" :label="item" :value="item"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item  label="数据库名称" prop="dbname" style="margin-bottom: 5px;">
              <el-input size="mini" v-model="formData.dbname" style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item  label="主机" prop="host" style="margin-bottom: 5px;">
              <el-input size="mini" v-model="formData.host" style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item  label="端口" prop="port" style="margin-bottom: 5px;">
              <el-input size="mini" v-model="formData.port" style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item  label="用户名" prop="username" style="margin-bottom: 5px;">
              <el-input size="mini" v-model="formData.username" style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item  label="密码" prop="passwd" style="margin-bottom: 5px;">
              <el-input size="mini" type="password" v-model="formData.passwd" style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item  label="编码" prop="type" style="margin-bottom: 5px;">
              <el-select size="mini" v-model="formData.type" style="width: 300px;">
                  <el-option v-for="item in types" :key="item" :label="item" :value="item"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item  label="模式" prop="owner" style="margin-bottom: 5px;">
              <el-input size="mini" v-model="formData.owner" style="width: 300px;"></el-input>
          </el-form-item>
          <div class="btn-group" v-if="showBtn">
              <el-button type="danger" size="small" plain  @click="testConnect">测试连接</el-button>
              <el-button type="primary" size="small"  @click="save">保存</el-button>
          </div>
      </el-form>
  </div>
</template>

<script>
import { DATABASE_CON_SAVE, QUERY_DBLINK } from '@api/url'
import ajax from '@api/ajax'
export default {
    name: 'edit-database-connect',
    data () {
        return {
            formData: {
              optMode: 'U'
            },
            formRules: {
              name: [{required: true, message: '此项为必输项', trigger: 'blur'}],
              driverClass: [{required: true, message: '此项为必输项', trigger: 'blur'}],
              dbname: [{required: true, message: '此项为必输项', trigger: 'blur'}],
              host: [{required: true, message: '此项为必输项', trigger: 'blur'}],
              port: [{required: true, message: '此项为必输项', trigger: 'blur'}],
              username: [{required: true, message: '此项为必输项', trigger: 'blur'}],
              passwd: [{required: true, message: '此项为必输项', trigger: 'blur'}],
              type: [{required: true, message: '此项为必输项', trigger: 'blur'}],
              owner: [{required: true, message: '此项为必输项', trigger: 'blur'}]
            },
            driverClasses: [
              'com.microsoft.sqlserver.jdbc.SQLServerDriver',
              'com.mysql.jdbc.Driver',
              'oracle.jdbc.driver.OracleDriver',
              'sunje.goldilocks.jdbc.GoldilocksDriver'
            ],
            types: ['自动', 'UTF-8', 'GBK2312', 'BIG5'],
            searchpro: true
        }
  },
    props:{
        showBtn:true,
        optMode: {
            type: String,
            default: ''
        },
    },
    methods: {
        save () {
          this.$refs.form.validate(valid => {
            this.formData.optMode = this.optMode
            if (valid) {
              ajax.post(DATABASE_CON_SAVE, this.formData).then(res => {
                  this.$message.success('保存成功！')
                  this.$emit('saved')
                }).catch(err => {
                  console.error('保存失败！', err)
                })
            } else {
              return false
            }
          })
        },
        testConnect () {
          this.$refs.form.validate(valid => {
            this.formData.optMode = 'T'
            if (valid) {
                const loading = this.$loading({
                    lock: true,
                    text: `连接测试中...`,
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
              });
              ajax.post(DATABASE_CON_SAVE, this.formData).then(res => {
                  console.info(res)
                  loading.close();
                  this.$message.success('连接测试成功！')
                }).catch(err => {
                  console.error('连接失败！', err)
                })
            } else {
              return false
            }
          })
        },
        clearStageData () {
          this.formData = {}
          this.$refs.form.clearValidate()
        },
        queryByCondition (dataBaseInfoId) {
          this.search = {
            ...dataBaseInfoId
          }
          this.getDataBaseConInfo()
        },
        // 表格查询
        getDataBaseConInfo () {
          ajax.post(QUERY_DBLINK, this.search).then(res => {
              this.formData = res.data.records[0]
              this.searchpro = res.data.records[0].searchpro
            }).catch(err => {
              console.error('错误！', err)
            })
        }
    }
}
</script>
<style lang="stylus">
    #EditDatabaseConnect{
        .el-form-item{
            .el-input{
                font-size 14px;
                input{
                    background-color #FAFAFA
                    height: 34px;
                    text-align: right;
                    font-size 14px;
                }
            }
        }
    }
</style>
<style lang="stylus" scoped>
    .btn-group{
        width: 100%;
        justify-content: center;
        margin-top: 30px;
        button{
            width 90px
            font-size 14px
            margin-left 40px
        }
    }
</style>
